<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>有点水</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- 渲染、旋转（可设置速度），移动、自动缩放大小,环境光随机 -->
  <div id="Stats-output">
  </div>
  <!-- Div which will hold the Output -->
  <div id="WebGL-output">
  </div>
</body>
<script type="text/javascript" src="./libs/three.js"></script>
<script type="text/javascript" src="./libs/stats.js"></script>
<script type="text/javascript" src="./libs/dat.gui.js"></script>
<script>
  let scene;
  let camera;
  let renderer;
  let stats;
  let controls;
  let cube;
  let scale = 1;
  let axis;
  const initStats = () => {
    const stats = new Stats();
    stats.setMode(0); //设置调试模式，默认显示每秒渲染帧数，点击显示每毫秒渲染帧数
    stats.domElement.style.position = 'absolute'; //设置位置
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.getElementById('Stats-output').appendChild(stats.domElement);
    return stats;
  }

  const init = () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    axis = new THREE.AxisHelper(20); //坐标轴
    stats = initStats();
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000); //实例化相机，设置角度、长宽比以及最近刚和最远距离
    camera.position.x = -30; //设置相机x的位置
    camera.position.y = 40; //设置相机y的位置
    camera.position.z = 30 //设置相机z的位置
    camera.lookAt(scene.position); //将相机的中心点设置为场景的中心点
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x999999));
    renderer.setSize(w, h); //设置渲染器大小
    renderer.shadowMapEnabled = true; //允许光源投射到物体上产生阴影

    const cubeGeometry = new THREE.BoxGeometry(6, 6, 6); //设置立体几何体的长宽宽
    const cubeMaterial = new THREE.MeshLambertMaterial({
      color: 0xFFF012,
      wireframe: controls.isWireframe //显示线框
    });
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial); //实例化立方体几何体
    cube.position.x = 0; //设置立方体相对于原点的x位置
    cube.position.y = 0; //设置立方体相对于原点的y位置
    cube.position.z = 0; //设置立方体相对于原点的z位置
    cube.castShadow = true; //允许光源投射到物体上产生阴影
    scene.add(cube); //将立方体几何体添加到场景中

    // 添加环境光源
    const ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光源
    // scene.add(ambientLight);

    // 添加光源
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, 20); //设置光源位置
    spotLight.castShadow = true; //允许光源产生阴影
    scene.add(spotLight); //将光源添加到场景中
    scene.add(axis); //将坐标轴添加到场景
    render();
  }
  // 设置操作
  const guiActions = () => {
    const gui = new dat.GUI();
    controls = new function() {
      this.visible = false; //是否显示
      this.wireframe = false; //是否显示线框
      this.isRotation = false; //是否选择
      this.axisVisible = false; //辅助线
      this.rotationNum = 0.02; //旋转速度
      this.scaleX = 1;
      this.scaleY = 1;
      this.scaleZ = 1;
      this.positionX = 0;
      this.positionY = 0;
      this.positionZ = 0;
      this.reset = () => {
        controls.rotationNum = 0.02; //旋转速度
        controls.scaleX = 1;
        controls.scaleY = 1;
        controls.scaleZ = 1;
        controls.positionX = 0;
        controls.positionY = 0;
        controls.positionZ = 0;
      }
    }
    gui.add(controls, 'axisVisible').name('辅助轴');
    gui.add(controls, 'visible').name('是否显示');
    gui.add(controls, 'wireframe').name('面或线框');
    gui.add(controls, 'isRotation').name('是否旋转');
    gui.add(controls, 'rotationNum', 0.02, 0.4).name('旋转速度').listen();
    gui.add(controls, 'scaleX', 1, 10).name('x轴规模').listen();
    gui.add(controls, 'scaleY', 1, 10).name('y轴规模').listen();
    gui.add(controls, 'scaleZ', 1, 10).name('z轴规模').listen();
    gui.add(controls, 'positionX', 0, 10).name('x轴偏移').listen();
    gui.add(controls, 'positionY', 0, 10).name('y轴偏移').listen();
    gui.add(controls, 'positionZ', 0, 10).name('z轴偏移').listen();
    gui.add(controls, 'reset').name('恢复');
  }
  const render = () => {
    document.getElementById('WebGL-output').appendChild(renderer.domElement);
    stats.update();
    axis.visible = controls.axisVisible; //是否显示辅助线
    cube.visible = controls.visible; //是否显示
    cube.material.wireframe = controls.wireframe; //线框
    console.log(controls.isRotation);
    if (controls.isRotation) { //旋转
      cube.rotation.x += controls.rotationNum; //x旋转
      cube.rotation.y += controls.rotationNum; //y旋转
      cube.rotation.z += controls.rotationNum; //z旋转
    }
    cube.position.x = controls.positionX; //平移x
    cube.position.y = controls.positionY; //平移y

    cube.position.z = controls.positionZ; //平移z
    cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ); //规模
    requestAnimationFrame(render); //动画
    renderer.render(scene, camera);
  }
  window.onload = init;
  guiActions();
  window.addEventListener('resize', () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    camera.aspect = w / h; //设置长宽比
    camera.updateProjectionMatrix(); //更新相机投影信息
    renderer.setSize(w, h);
  })
</script>

</html>